<template>
    <div class="subpage contact-container">
        <ul class="contact-box">
            <li>
                <img src="@/assets/img/contact_tel_icon.png" alt="">
                <div class="contact-box-right">
                    <p>客服电话</p>
                    <div>
                        <a href="tel:400-136-8801">
                            <span>400-136-8801</span>
                            <van-icon name="arrow" class="arrow-right" />
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <img src="@/assets/img/contact_wx_icon.png" alt="">
                <div class="contact-box-right" @click="showAlertFn(1)">
                    <p>微信客服</p>
                    <div>
                        <span>youmubao01</span>
                        <van-icon name="arrow" class="arrow-right" />
                    </div>
                </div>
            </li>
            <li>
                <img src="@/assets/img/contact_qq_icon.png" alt="">
                <div class="contact-box-right" @click="showAlertFn(2)">
                    <p>QQ群</p>
                    <div>
                        <span>1018698707</span>
                        <van-icon name="arrow" class="arrow-right" />
                    </div>
                </div>
            </li>
        </ul>
        <div class="copyright-text">
            <p>Copyright &copy; 2019</p>
            <p>友牧农场umfarm.com版权所有</p>
        </div>

        <div class="contact-alert-box" v-if="showAlert" @click="showAlert = false">
            <img 
                :src="showImgSrc == 1 ? wxImg : qqImg" 
                alt=""
            >
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showAlert: false,
            showImgSrc: 1,
            wxImg: 'https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190930/15698081699559531.png',
            qqImg: 'https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190930/15698082230339173.png'
        }
    },
    methods: {
        showAlertFn(type) {
            this.showAlert = true;
            this.showImgSrc = type;
        }
    }
}
</script>

<style lang="scss" scoped>
    .contact-container {
        .contact-box {
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            background-color: #fff;
            li {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    width: 30px;
                    height: 30px;
                    object-fit: cover;
                    margin-right: 16px;
                }
                .contact-box-right {
                    padding: 18px 0;
                    box-sizing: border-box;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #344047;
                    border-bottom: 1px solid #f2f2f2;
                    font-size: 16px;
                    div {
                        display: flex;
                        align-items: center;
                        a {
                            display: flex;
                            align-items: center;
                            color: #344047;
                        }
                        span {
                            margin-right: 4px;
                        }
                    }
                }
            }
        }
        .copyright-text {
            position: absolute;
            bottom: 48px;
            left: 0;
            z-index: 1;
            width: 100%;
            text-align: center;
            color: #969C9E;
            font-size: 12px;
        }
    }
    .contact-alert-box {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 209px;
            height: 234px;
            object-fit: cover;
        }
    }
</style>